<template>
	<view v-if="orderInfo">
		<view class="page page-bottom-bar book-hotel">
			<!-- 入住信息 -->
			<view class="book-info p25">
				<view class="font15">{{orderInfo.hotel_name}}</view>
				<view class="font13">
					<image class="icon-date" mode="widthFix" src="https://static.newbeaconhotels.com/app/hotel/icon-date.png"></image>
					<text class="font-969696">入住：</text>{{orderInfo.arr}}
					<text class="font-969696">离店：</text>{{orderInfo.dep}}
					<text class="font-969696">共{{orderInfo.daycount}}晚</text>
				</view>
				<view class="font13 font-969696">
					<image class="icon-lan" mode="widthFix" src="https://static.newbeaconhotels.com/app/hotel/icon-lan.png"></image>
					<text>{{orderInfo.hotel_addrd}}</text>
				</view>
			</view>
			<view class="hr7"></view>
			<!-- 订单信息 -->
			<view class="book-detail font14">
				<view class="item">
					<view>{{orderInfo.room_name}}</view>
					<view class="font-969696">{{orderInfo.rmnum}}间</view>
				</view>
				<view class="item">
					<view>入住人</view>
					<view class="font-969696">{{orderInfo.user_name}} {{orderInfo.mobile}}</view>
				</view>
				<view class="item">
					<view>早餐份数</view>
					<view class="font-969696">{{orderInfo.breakfast ? orderInfo.breakfast : '无早餐'}}</view>
				</view>
				<view class="item">
					<view>支付方式</view>
					<view class="font-969696">{{orderInfo.type}}</view>
				</view>
				<view class="item nob">
					<view>优惠券</view>
					<view class="font-969696">
						<text v-if="orderInfo.coupon" style="padding-right: 16rpx;">({{orderInfo.coupon}})</text>
						-<text class="font12">￥</text>{{orderInfo.bill.coupon.money}}
					</view>
				</view>
			</view>
			<view class="hr7"></view>
			<view class="book-detail font14">
				<view class="item nob">
					<view>发票信息</view>
					<view class="font-969696">联系前台办理</view>
				</view>
			</view>
			<view class="hr7"></view>
			<view class="book-tip p25">
				<view class="font13 font-646464">备注：</view>
				<view class="nodes font11 font-646464">{{orderInfo.remark ? orderInfo.remark : '暂无'}}</view>
			</view>
			<view class="hr7"></view>
			<view class="orderInfo font13">
				<view class="item">
					<text class="font-969696">订单状态：</text>
					<text>{{orderInfo.status}}</text>
				</view>
				<view class="item">
					<text class="font-969696">订单编号：</text>
					<text>{{orderInfo.wx_order}}</text>
				</view>
				<view class="item">
					<text class="font-969696">预定时间：</text>
					<text>{{orderInfo.createtime}}</text>
				</view>
			</view>
		</view>
		
		<!-- 合计信息 -->
		<view class="book-bar flex-row-between flex-start">
			<view class="part1 flex-column-center flex-start">
				<view class="font12">订单金额: <text class="font16 font-assist">￥{{orderInfo.bill.pay.money}}</text></view>
				<view class="font11 font-assist">已优惠￥{{orderInfo.bill.coupon.money}}</view>
			</view>
			<view class="part2" @tap="openDetails">
				<text class="font11">明细</text>
				<uni-icons type="arrowup" size="10" color="#424141"></uni-icons>
			</view>
		</view>
		
		<!-- 订单明细 -->
		<bottomPopup ref="details" title="订单金额明细">
			<view class="details-box">
				<view v-if="orderInfo.bill" class="list">
					<block v-for="(item, index) in orderInfo.bill.hotel.daily" :key="index">
						<view class="flex-row-between font14 font-969696">
							<view class="">{{item.date}}</view>
							<view class="">￥{{item.realRate}}</view>
						</view>
					</block>
				</view>
				<view class="price font14 font-969696">
					<view class="">早餐金额：<text class="font-assist">￥{{orderInfo.bill.breakfast.money}}</text></view>
					<view class="">优惠金额：<text class="font-assist">￥{{orderInfo.bill.coupon.money}}</text></view>
					<view class="">订单合计：<text class="font-assist">￥{{orderInfo.bill.pay.money}}</text></view>
				</view>
			</view>
		</bottomPopup>
	</view>
</template>

<script>
	import bottomPopup from "@/components/j-bottomPopup/index.vue";
	export default {
		components: { bottomPopup },
		data() {
			return {
				themeColor: '#03004c',
				orderInfo: null
			}
		},
		onLoad: function (options) {
			this.$Http({
				url: 'hotelOrderInfo',
				token: true,
				load: true,
				data: {order_id: options.id}
			}).then(res => {
				if (res.code == 1) {
					this.orderInfo = res.data
				} else {
					uni.showToast({  title: res.msg, icon: 'none' });
				}
			});
		},
		onShow() {
		},
		methods: {
			// 打开明细
			openDetails () {
				this.$refs.details.Onopen()
			},
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
